<template>
	<view class="historyList">
		<template v-if="arr.length > 0">
			<view class="listClude" v-for="(i, index) in arr" :key="index">
				<view class="listHeader">
					{{i.createTime.replace('T', ' ').split('.')[0]}}
				</view>
				<view class="listBody">
					<view class="label">IEMI</view>
					<view class="listRight">{{i.iemi}}</view>
				</view>
				<view class="listBody">
					<view class="label">报警状态</view>
					<view class="listRight" v-if="i.status === 'warn'">预警</view>
					<view class="listRight" v-if="i.status === 'error'" style="color: #EE2A0E;">
						<text v-if="wareType === 1">打开</text>
						<text v-if="wareType === 2">报警</text>
						<text v-if="wareType === 3">报警</text>
						<text v-if="wareType === 4">预警</text>
					</view>
					<view v-if="i.status === 'off'" style="color: #999;">离线</view>
					<view v-if="i.status === 'normal'" style="color: #2DBDA2;">正常</view>
					<!-- <view class="listRight">{{i.iemi}}</view> -->
				</view>
				<template v-if="wareType === 2">
					<view class="listBody">
						<view class="label">温度</view>
						<view class="listRight">{{i.temperature}}℃</view>
					</view>
					<view class="listBody">
						<view class="label">压力</view>
						<view class="listRight">{{i.yali}}{{i.unit}}</view>
					</view>
				</template>
				
				<view class="listBody">
					<view class="label">电池电压</view>
					<view class="listRight">{{i.dianya}}</view>
				</view>
				<view class="listBody">
					<view class="label">电池电量</view>
					<view class="listRight">{{i.dianliang}}%</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="blankPage">
				<image src="../../static/index/noData.png" mode="" class="noData"></image>
				<view class="noText">暂无数据</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {historyList} from './js/api.js'
	export default{
		data () {
			return {
				params: {
					unionid: uni.getStorageSync('unionid'),
					iemi: '',
					limit: 10,
					offset: 0
				},
				arr: [],
				wareType: '',
				count: 0
			}
		},
		onLoad(option) {
			this.params.iemi = option.iemi
			this.wareType = parseInt(option.wareType)
			this.getHistory()
		},
		onReachBottom() {
			if (this.arr.length > 0) {
				this.params.offset = this.count + this.params.offset
				this.getHistory()
			} else {
				this.params.offset = 0
				this.getHistory()
			}
		},
		onPullDownRefresh() {
			this.params.offset = 0
			this.arr = []
			this.getHistory()
		},
		methods:{
			getHistory() {
				historyList(this.params).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.count = res.data.count
						this.params.offset = res.data.offset
						if (res.data.list !== null) {
							this.arr = this.arr.concat(res.data.list)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					uni.stopPullDownRefresh()
				})
			} 
		}
	}
</script>

<style lang="scss">
	.historyList{
		background-color: #F6F6F6;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		.listClude{
			width: 690rpx;
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			min-height: 400rpx;
			.listHeader{
				width: 650rpx;
				margin: 0 auto;
				height: 70rpx;
				border-bottom: 1rpx solid #eee;
				color: #333333;
				font-size: 28rpx;
				text-align: left;
				line-height: 70rpx;
			}
			.listBody{
				width: 650rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15rpx;
				font-size: 28rpx;
				.label{
					color: #999999;
				}
				.listRight{
					color: #333333;
				}
			}
		}
		.blankPage{
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			.noData{
				width: 126rpx;
				height: 164rpx;
				margin: 300rpx auto 0;
			}
			.noText{
				color: #999999;
				font-size: 30rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>
